<template>
  <div id="home">
    <self-swiper :data="selfSwiper" />
    <nine-grid>
      <div class="nine-grid-item" v-for="(item,index) in nineGrid" :key="index">
        <router-link :to="item.routerData" v-if="item.routerData">
          <span>
            <img :src="item.src" />
          </span>
          <br />
          {{item.title}}
        </router-link>
        <a v-if="!item.routerData" @click="openPopup">
          <span>
            <img :src="item.src" />
          </span>
          <br />
          {{item.title}}
        </a>
      </div>
    </nine-grid>
    <mt-popup
      v-model="isShow"
      :position="popupPostion"
      :modal="isShowModal"
      ref="mintPopup"
      style="width:100%;height:101%;"
    >
      <news-list />
    </mt-popup>
  </div>
</template>
<script>
import "./index.less";
import { nineGrid } from "../../config";
import { middleVue } from "../../services";
export default {
  data() {
    return {
      selfSwiper: {
        swipeList: [],
        className: "home-swipe"
      },
      nineGrid,
      isShow: false,
      isShowModal: false,
      popupPostion: "right"
    };
  },
  methods: {
    openPopup() {
      this.isShow = true;
      // this.$refs.mintPopup.open();
      middleVue.$emit("getPopupComponent", { mintPopup: this.$refs.mintPopup });
    }
  },
  created() {
    this.$axios
      .get("getlunbo")
      .then(res => {
        this.selfSwiper.swipeList = res.data.message;
      })
      .catch(err => console.log(err));
  },
  destoryed() {
    middleVue.$off("closePopup");
  }
};
</script>
